.menu, .submenu{-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;font-size: 14px;list-style: none;outline: none; white-space: nowrap; transition: background .3s,width .2s;}
.menu:before, .menu:after, .submenu:before, .submenu:after{display: table; content: ''}
.menu-divider{display: none}

.menu-dark{background: #393D49; color: #FFF}
.menu-light{background: transparent; color: #000}

.menu-horizontal{line-height: 46px;border-bottom: 1px solid #e8e8e8}
.menu-verticle{line-height: 32px}

.menu-item{filter: opacity(.8)}
.menu-item, .menu-item-group{white-space: nowrap; cursor: pointer; transition: color .3s cubic-bezier(.645, .045, .355, 1),border-color .3s cubic-bezier(.645, .045, .355, 1),background .3s cubic-bezier(.645, .045, .355, 1),padding .15s cubic-bezier(.645, .045, .355, 1);}
.menu-item:hover, .menu-item-active{filter: none;}

.submenu-hide{display: none}
.submenu-arrow{position: absolute; top: 50%; margin-top: -3px; width: 0; height: 0; content: ''; border-style: solid dashed dashed;cursor: pointer; overflow: hidden; border-width: 6px; border-top-color: rgba(255,255,255,.7)}
.submenu-title{filter: opacity(.8)}
.submenu-title.submenu-opened{filter: none}
.submenu-title.submenu-opened>.submenu-arrow{border-style: dashed dashed solid; margin-top: -9px}

.menu-dark .submenu{background-color: rgba(0, 0, 0, .2)}
.menu-light .submenu-arrow{border-color: #000 transparent transparent}
.menu-dark .submenu-arrow{border-color: #fff transparent transparent}
.menu-light .submenu-title.submenu-opened>.submenu-arrow{border-color: transparent transparent #000}
.menu-dark .submenu-title.submenu-opened>.submenu-arrow{border-color: transparent transparent #fff}

.menu-horizontal>.menu-item, .menu-horizontal>.menu-item-group{display: inline-block; position: relative; padding: 0 20px; vertical-align: bottom; line-height: 43px; border-bottom: 4px solid transparent}
.menu-horizontal>.menu-item:hover, .menu-horizontal>.menu-item-active, .menu-horizontal>.menu-item-group:hover{border-bottom: 4px solid #009688}
.menu-horizontal>.menu-item-group>.submenu{display: block; position: absolute; left: 0; top: 47px; min-width: 100%; line-height: 36px; padding: 5px 0; color: #000;  box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 4000; white-space: nowrap;}
.menu-horizontal .submenu .menu-item{display: block; padding: 0 20px}
.menu-horizontal .submenu-title{padding-right: 8px; filter: none}
.menu-horizontal .submenu-arrow{right: 8px}
.menu-horizontal .submenu>.menu-divider{display: block; width: 100%; height: 0; border-bottom: 1px solid rgba(0, 0, 0, .25)}

.menu-verticle .menu-item, .menu-verticle .submenu-title{display: block; position: relative; line-height: 32px}
.menu-verticle .menu-item:hover, .menu-verticle .menu-item-active, .menu-verticle .menu-item-group:hover, .menu-verticle .submenu-title.submenu-opened{filter: none}
.menu-verticle .submenu-arrow{right: 12px}
.menu-verticle .submenu-title.submenu-opened{background-color: rgba(33, 33, 33, 0.11)}
.menu-verticle.menu-dark .menu-item-active{background: #1890ff}
.menu-verticle.menu-light .menu-item-active{background-color: #93ddff}

.layout-header .menu, .layout-sider .menue{background-color: transparent}
.layout-header .menu-horizontal{border-bottom: none}
.layout-header .menu-item, header .submenu-title{text-align: center}
